<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
    作用：控制元素的显示和隐藏
    语法：
     <div v-show="值为布尔类型的js表达式(data中的属性)"></div>
     <div v-if="值为布尔类型的js表达式(data中的属性)"></div>
    区别：
      v-if  =》通过创建和移除元素控制显示和隐藏=》操作DOM
        内部控制元素的显示和隐藏使用的是原生的dom操作
        适合不是那么频繁变化的操作
        切换性能比较高
        如果绑定值得初始值是false的话 元素直接不出现在文档中 直到把值设置为true才会正式添加到dom文档中

      v-show  内部控制元素的显示和隐藏  dom.style.display = 'block' / 'none'
        适合频繁操作的场景
        初始化有一定性能损耗
        不管绑定值得初始值是否为false 元素都需要出现在dom文档中 因为只有出现了才能控制style.display属性
   -->
  <div id="app">
    <!-- 基本使用 -->
    <h1 v-show="isShow">v-show基本使用</h1>
    <div v-if="isShow2">v-if基本使用</div>
    <div v-else>上边不显示我就显示</div>
    <hr>
    <!-- 扩展用法 -->
    <h1 v-show="type === 1">v-show基本使用</h1>
    <div v-if="type === 1">v-if基本使用</div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        isShow: true,
        isShow2: false,
        type: 0
      }
    })
  </script>
</body>

</html>